<template>
	<div class="order">
		<cl-crud @load="onLoad">
			<template #slot-datepicker>
				<div class="_top-filter">
					<!-- <date-picker
						style="width:350px;"
						:datas="datas"
						@change="val => refresh({ startTime: val[0], endTime: val[1], page: 1 })"
						@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
					></date-picker> -->
					<div>
						<select-taobao
							class="selects"
							v-model="selects.pid"
							@change="val => refresh({ taobaoId: val, page: 1 })"
						></select-taobao>
					</div>
					<div>
						<select-staff
							class="selects"
							v-model="selects.staffId"
							@change="val => refresh({ staffId: val, page: 1 })"
						></select-staff>
					</div>
					<el-button
						@click="wechartExport"
						v-permission="'crm:order:positionExport'"
						type="primary"
						style="margin-left:10px"
						size="mini"
						><i class="el-icon-download"></i>导出报表</el-button
					>
				</div>
			</template>
			<template #table-column-pid="{scope}">
				<div>
					<div>{{ scope.row.adzoneId }}</div>
					<div>{{ scope.row.positionName }}</div>
				</div>
			</template>
			<template #slot-SelectTaobao="{scope}">
				<div>
					<addSelectTaobao
						@change="val => pidRefresh({ taobaoId: val })"
						style="width:100%"
						v-model="scope.taobaoId"
					></addSelectTaobao>
				</div>
			</template>
			<template #slot-addSelectPid="{scope}">
				<div>
					<addSelectPid
						ref="pid"
						style="width:100%"
						@changeItem="pidItemChange"
						v-model="scope.adzoneId"
					></addSelectPid>
				</div>
			</template>
			<template #slot-addSelectStaff="{scope}">
				<div>
					<addSelectStaff style="width:100%" v-model="scope.staffId"></addSelectStaff>
				</div>
			</template>
			<template #table-column-tkStatus="{scope}">
				<el-tag size="small" type="warning" v-if="scope.row.tkStatus == 3">订单结算</el-tag>
				<el-tag size="small" v-if="scope.row.tkStatus == 12">订单付款</el-tag>
				<el-tag size="small" type="info" v-if="scope.row.tkStatus == 13">订单失效</el-tag>
				<el-tag size="small" type="success" v-if="scope.row.tkStatus == 14"
					>订单成功</el-tag
				>
			</template>
		</cl-crud>
	</div>
</template>
<script>
// import DatePicker from '@/components/order/date-picker';
import SelectTaobao from '@/components/order/select-taobao';
import SelectStaff from '@/components/order/select-staff';
import addSelectTaobao from './component/add-tb-select';
import addSelectPid from './component/add-pid-select';
import addSelectStaff from './component/add-staff-select';
import moment from 'moment';
import { download, dateFormat } from '@/utils/index';
export default {
	data() {
		return {
			crud: null,
			selects: {
				timeType: 0,
				pid: '',
				positionId: '',
				staffId: '',
				tkStatus: ''
			},
			datas: [this.$route.query.startTime, this.$route.query.endTime],
			params: {
				startTime: this.$route.query.startTime,
				endTime: this.$route.query.endTime,
				...dateFormat(0)
			}
		};
	},
	components: {
		// DatePicker,
		SelectTaobao,
		SelectStaff,
		addSelectTaobao,
		addSelectStaff,
		addSelectPid
	},
	methods: {
		// crud 初始化
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.reproing.wechatfans)
				.set('dict', {
					api: {
						list: 'list', // 全部数据
						add: 'add', // 新增
						update: 'update', // 修改
						delete: 'delete', // 删除
						info: 'info' // 详情
					},
					label: {
						add: '添加微信号'
					},
					search: {
						query: 'salesStatus'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'index',
							label: '序号',
							align: 'center',
							width: '60px'
						},
						{
							label: '微信编号',
							prop: 'label',
							align: 'center'
						},
						{
							label: '微信名称',
							prop: 'name',
							align: 'center'
						},
						{
							label: '粉丝总数',
							prop: 'fansNum',
							align: 'center'
						},
						{
							label: '裂变总数',
							prop: 'fissionNum',
							align: 'center'
						},
						{
							label: 'A类总数',
							prop: 'aTypeNum',
							align: 'center'
						},
						{
							label: '所属PID',
							prop: 'pid',
							align: 'center'
						},
						{
							label: '所属联盟号',
							prop: 'account',
							align: 'center'
						},
						{
							label: '运营人',
							prop: 'username',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '更新时间',
							prop: 'updateTime',
							align: 'center',
							emptyText: '无',
							minWidth: 140
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							minWidth: 140
						}
					]
				})
				.set('upsert', {
					props: {
						title: '添加微信号',
						width: '500px',
						'label-width': '150px'
					},
					items: [
						{
							prop: 'label',
							label: '微信号编号',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入微信编号',
									disabled: false
								}
							},
							rules: [
								{
									required: true,
									message: '请输入微信编号',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'name',
							label: '微信号名称',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入微信号名称'
								}
							},
							rules: [
								{
									required: true,
									message: '请输入微信名称',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'taobaoId',
							label: '所属联盟',
							component: {
								name: 'slot-SelectTaobao'
							},
							rules: [
								{
									required: true,
									message: '请选择所属联盟',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'adzoneId',
							label: '选择PID',
							component: {
								name: 'slot-addSelectPid',
								attrs: {
									placeholder: '请选择PID'
								}
							},
							rules: [
								{
									required: true,
									message: '请选择PID',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'staffId',
							label: '运营人',
							component: {
								name: 'slot-addSelectStaff'
							},
							rules: [
								{
									required: true,
									message: '请选择运营人',
									trigger: 'blur'
								}
							]
						},
						// {
						// 	prop: 'fansNum',
						// 	label: '粉丝总数',
						// 	component: {
						// 		name: 'el-input',
						// 		attrs: {
						// 			placeholder: '请输入粉丝数'
						// 		}
						// 	},
						// 	rules: [
						// 		{
						// 			required: true,
						// 			message: '请输入粉丝数',
						// 			trigger: 'blur'
						// 		}
						// 	]
						// },
						// {
						// 	prop: 'aTypeNum',
						// 	label: 'A类总数',
						// 	component: {
						// 		name: 'el-input',
						// 		attrs: {
						// 			placeholder: '请输入A类总数'
						// 		}
						// 	},
						// 	rules: [
						// 		{
						// 			required: true,
						// 			message: '请输入A类总数',
						// 			trigger: 'blur'
						// 		}
						// 	]
						// },
						{
							prop: 'remark',
							label: '备注',
							component: {
								name: 'el-input',
								attrs: {
									type: 'textarea',
									placeholder: '请输入备注'
								}
							}
						}
					]
				})
				.set('search', {
					key: {
						placeholder: '请输入微信编号'
					}
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'slot-datepicker', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('open', isOpen => {
					this.crud.setData('upsert.items[label].component.attrs.disabled', isOpen);
				})
				.done();
			app.refresh({
				...this.params
			});
		},
		// 根据 staffId 默认选中 值 设置表  id到pId上 给后台
		pidItemChange(item) {
			this.crud.setForm('pId', item.id);
			this.crud.setForm('staffId', item.staffId == '0' ? '' : item.staffId);
		},
		// 根据淘宝 id 获取推广位列表
		pidRefresh(params) {
			this.crud.setForm('adzoneId', '');
			this.crud.setForm('staffId', '');
			this.$refs['pid'].refresh({
				taobaoId: params.taobaoId
			});
		},
		refresh(params) {
			this.params = {
				...this.params,
				...params
			};
			this.crud.refresh(this.params);
		},
		// 导出报表
		wechartExport() {
			this.$service.reproing.wechatfans
				.export(this.params)
				.then(res => {
					download({
						data: res,
						fileName: `微信号管理-${moment().format('YYYY-MM-DD HH:mm:ss')}`
					});
				})
				.catch(err => console.err(err));
		}
	}
};
</script>
<style lang="stylus" scoped>
.crud-index {
    padding 10px
}
.order {
    height 100%
}
._top-filter .el-date-editor {
    border-left 1px solid #DCDFE6
}
.el-range-editor.is-active {
    border-color #FF4400
}
.select-staff {
    font-size 11px
    margin-right 10px
}
</style>
